/**
 * Created by mapbar_front on 2019/8/2.
 */
import React,{Component} from 'react';

function log(Component){
    class LogProps extends Component{
        componentDidUpdate(prevProps){
            console.log('prevProps',prevProps);
            console.log('this.props',this.props);
        }
        render(){
            const {forwardedRef,...rest} = this.props;
            return <Component ref={forwardedRef} {...rest}/>
        }
    }
    return React.forwardRef((props,ref)=>{
        return <LogProps {...props} forwardedRef={ref}/>
    })
}

class FancyButton extends Component{
    render(){
        return(
            <div>
                FancyButton
            </div>
        )
    }
}
class RefsHoc extends Component{
    constructor(props){
        super(props);
        this.ref = React.createRef();
    }
    handleClick=()=>{

    }
    render(){
        return(
            <div>
                <FancyButton
                    label="Click Me"
                    handleClick={ this.handleClick}
                    ref={this.ref}
                />
            </div>
        )
    }
}
export default log(FancyButton);
